<template>
  <div v-loading="loading">
    <div class="content-list" @click="detailData.activeName ? active = false : ''">
      <el-row>
        <el-col class="left" :span="4">活动名称：</el-col>
        <el-col class="right g-flex-start" :span="20">
          <span v-if="!active">{{ detailData.activeName }}</span>
          <el-input v-else v-model="detailData.activeName" @change="changeName" :maxlength="30" @click.stop.native size="small"></el-input>
          <img v-if="!active" src="../../../../assets/image/modify.png" @click.stop="active = true" alt="">
        </el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">创建时间：</el-col>
        <el-col class="right" :span="20">{{ detailData.submitTime | formatTime }}</el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">活动油站：</el-col>
        <el-col class="right" :span="20">{{ detailData.gasName }}</el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">喊话内容：</el-col>
        <el-col class="right" :span="20">{{ detailData.content }}</el-col>
      </el-row>
      <el-row v-if="detailData.activityStatus === 7">
        <el-col class="left" :span="4">未通过原因：</el-col>
        <el-col class="right" :span="20">{{ detailData.failReason }}</el-col>
      </el-row>
      <el-row v-else>
        <el-col class="left" :span="4">下线时间：</el-col>
        <el-col class="right" :span="20">{{ detailData.endTime | formatTime }}</el-col>
      </el-row>
    </div>

    <!-- 日历组件 -->
    <el-card style="margin-top: 20px" v-if="detailData.activityStatus !== 7 && detailData.activityStatus !== 3">
      <calendar ref="calendar" :range="range" :checkedDate="checkedDate" :disabledDays="disabledDays" :disabled="true">
        <template #footer>
          <p class="active-days">生效天数 <span>{{ detailData.effectiveDays }}</span> 天</p>
          <p>活动时间：{{ detailData.startTime | formatTime }} 至 {{ detailData.endTime | formatTime }}</p>
        </template>
      </calendar>
    </el-card>
  </div>
</template>
<script>
import { changeName } from '@/api/marketShop'
import { shoutsDetail, getShoutLeftDays } from '@/api/marketShop/masterShouts'
import calendar from '@/components/work/calendar'
import dayjs from 'dayjs'

export default {
  name: 'masterShouts',
  components: {
    calendar
  },
  props: ['id', 'detailType', 'gasId', 'show'],
  inject: ['resetData', 'getListData'],
  data () {
    return {
      active: false,
      detailData: {},
      range: [], // 日历显示范围
      checkedDate: [], // 设置已选中的日期
      loading: false,
      disabledDays: []
    }
  },
  methods: {
    // 修改活动名称
    async changeName () {
      if (!this.detailData.activeName) {
        this.$message({
          message: '请输入活动名称',
          type: 'warning'
        })
        return
      }
      try {
        const {code} = await changeName({activeName: this.detailData.activeName, activeId: this.id})
        if (code !== 200) return
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.active = false
        this.resetData(this.detailType)
        this.getListData(this.detailType)
      } catch (error) {
        console.log(error)
      }
    },
    // 处理详情数据
    async initData () {
      this.loading = true
      try {
        const {code, result} = await shoutsDetail({activityId: this.id})
        if (code !== 200) return
        this.detailData = result
        if (this.detailData.activityStatus === 7 || this.detailData.activityStatus === 3) {
          this.loading = false
          return
        }
        // 先清除日历
        this.$refs.calendar.clearChooseList()
        const entTime = ((result.endTime - dayjs().valueOf()) / (24 * 3600 * 1000)) >= 30 ? new Date(result.endTime): new Date(+new Date() + 30 * 24 * 3600 * 1000)
        this.range = [new Date(), entTime]
        this.checkedDate = result.endTime < result.startTime ? [] : [new Date(result.startTime), new Date(result.endTime)]
        // 查询不可选日期
        await this.getDate()
        this.$nextTick(() => {
          this.$refs.calendar.initCalendar()
          this.loading = false
        })
      } catch (error) {
        console.log(error)
      }
    },
    async getDate () {
      const {code, result: { unAvaliableDays = [] }} = await getShoutLeftDays({ gasId: this.gasId })
      if (code !== 200) return
      this.disabledDays = unAvaliableDays.map(item => dayjs(item).format('MM-DD'))
    }
  },
  watch: {
    show (val) {
      val && this.initData()
      this.active = false
    }
  },
  mounted () {
    this.initData()
  }
}
</script>
<style lang="less" scoped>
  .content-list {
    .left {
      color: #666666;
    }
    .right {
      color: #222222;
      img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    /deep/.el-row {
      margin-top: 20px;
    }
  }
  .active-days {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    span {
      font-size: 24px;
      color: #4B7EFE;
    }
    &+p {
      color: #999999;
    }
  }
</style>